<template>
  <div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full text-center">
      <!-- 404 图标 -->
      <div class="mb-8">
        <div class="mx-auto h-32 w-32 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full flex items-center justify-center">
          <span class="text-6xl font-bold text-white">404</span>
        </div>
      </div>

      <!-- 标题和描述 -->
      <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-4">页面未找到</h1>
        <p class="text-lg text-gray-600 mb-2">抱歉，您访问的页面不存在。</p>
        <p class="text-sm text-gray-500">请检查URL是否正确，或者返回首页继续浏览。</p>
      </div>

      <!-- 操作按钮 -->
      <div class="space-y-4">
        <el-button
          type="primary"
          size="large"
          @click="goHome"
          class="w-full h-12 text-base font-medium"
        >
          <el-icon class="mr-2">
            <House />
          </el-icon>
          返回首页
        </el-button>
        
        <el-button
          size="large"
          @click="goBack"
          class="w-full h-12 text-base"
        >
          <el-icon class="mr-2">
            <ArrowLeft />
          </el-icon>
          返回上页
        </el-button>
      </div>

      <!-- 快速链接 -->
      <div class="mt-8 pt-8 border-t border-gray-200">
        <p class="text-sm text-gray-500 mb-4">您可能想要访问：</p>
        <div class="flex flex-wrap justify-center gap-4">
          <router-link
            to="/login"
            class="text-sm text-blue-600 hover:text-blue-500 transition-colors"
          >
            登录
          </router-link>
          <router-link
            to="/register"
            class="text-sm text-blue-600 hover:text-blue-500 transition-colors"
          >
            注册
          </router-link>
          <router-link
            to="/dashboard"
            class="text-sm text-blue-600 hover:text-blue-500 transition-colors"
          >
            控制台
          </router-link>
        </div>
      </div>

      <!-- 联系支持 -->
      <div class="mt-8 p-4 bg-blue-50 border border-blue-200 rounded-lg">
        <div class="flex items-start">
          <el-icon class="text-blue-600 mt-0.5 mr-3" :size="18">
            <InfoFilled />
          </el-icon>
          <div class="text-sm text-blue-800">
            <p class="font-medium mb-1">需要帮助？</p>
            <p class="text-xs">
              如果您认为这是一个错误，请
              <a href="mailto:support@example.com" class="text-blue-600 hover:text-blue-500 underline">
                联系技术支持
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { House, ArrowLeft, InfoFilled } from '@element-plus/icons-vue'

// 路由
const router = useRouter()

/**
 * 返回首页
 */
const goHome = () => {
  router.push('/')
}

/**
 * 返回上一页
 */
const goBack = () => {
  // 如果有历史记录，返回上一页，否则去首页
  if (window.history.length > 1) {
    router.go(-1)
  } else {
    router.push('/')
  }
}
</script>

<style scoped>
/* 自定义样式 */
.el-button {
  border-radius: 8px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 640px) {
  .max-w-md {
    max-width: 100%;
    margin: 0 16px;
  }
  
  .text-6xl {
    font-size: 3rem;
  }
  
  .h-32.w-32 {
    height: 6rem;
    width: 6rem;
  }
}

/* 动画效果 */
.transition-colors {
  transition: color 0.2s ease;
}

/* 链接悬停效果 */
a {
  transition: all 0.2s ease;
}

a:hover {
  text-decoration: none;
}

/* 按钮悬停效果 */
.el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transition: all 0.2s ease;
}

/* 404 数字动画 */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.text-6xl {
  animation: bounce 2s infinite;
}
</style>
